<template>
	<el-dialog width="600px" v-model="props.visible" close-icon="CloseBold" @close="closeEvent">
		<template #header>
			<h4>支付方式</h4>
		</template>
		<template #default>
			<!-- 银行卡 -->
			<div class="mt-10px mb-10px" v-if="paymentSelected == 1">
				<p class="text-14px text-#86909C">选择支付账户</p>
				<div class="mt-10px rounded-10px border border-solid border-#E5E6EB p-10px">
					<div class="flex items-center">
						<p class="bg-#FC9559 w-4px h-14px"></p>
						<p class="text-16px text-#000 ml-10px">银行借记卡</p>
					</div>
					<p class="text-16px text-#000 mt-10px">夏天</p>
					<p class="text-16px text-#000 mt-10px">15236325203</p>
					<p class="text-16px text-#000 mt-10px">招商银行</p>
					<p class="text-16px text-#000 mt-10px">罗湖支行</p>
				</div>
				<p class="text-14px text-#86909C mt-10px">添加新账户</p>
				<div class="mt-10px rounded-10px border border-solid border-#E5E6EB p-10px flex items-center justify-between">
					<div class="flex items-center">
						<p class="bg-#FC9559 w-4px h-14px"></p>
						<p class="text-16px text-#000 ml-10px">银行借记卡</p>
					</div>
					<img src="/transaction/c2c/quick/add-pay.svg" alt="">
				</div>
			</div>
			<!-- 微信 -->
			<div class="mt-10px mb-10px" v-if="paymentSelected == 2">
				<p class="text-14px text-#86909C">选择支付账户</p>
				<div class="mt-10px rounded-10px border border-solid border-#E5E6EB p-10px">
					<div class="flex items-center">
						<p class="bg-#2DC100 w-4px h-14px"></p>
						<p class="text-16px text-#000 ml-10px">微信</p>
					</div>
					<p class="text-16px text-#000 mt-10px">夏天</p>
					<p class="text-16px text-#000 mt-10px">15236325203</p>
					<img src="/transaction/c2c/quick/code-2d.svg" alt="" class="w-20px h-20px mt-10px"
					@click="imgShow = true">
				</div>
				<p class="text-14px text-#86909C mt-10px">添加新账户</p>
				<div class="mt-10px rounded-10px border border-solid border-#E5E6EB p-10px flex items-center justify-between">
					<div class="flex items-center">
						<p class="bg-#2DC100 w-4px h-14px"></p>
						<p class="text-16px text-#000 ml-10px">微信</p>
					</div>
					<img src="/transaction/c2c/quick/add-pay.svg" alt="">
				</div>
			</div>
			<!-- 支付宝 -->
			<div class="mt-10px mb-10px" v-if="paymentSelected == 3">
				<p class="text-14px text-#86909C">选择支付账户</p>
				<div class="mt-10px rounded-10px border border-solid border-#E5E6EB p-10px">
					<div class="flex items-center">
						<p class="bg-#1187EE w-4px h-14px"></p>
						<p class="text-16px text-#000 ml-10px">支付宝</p>
					</div>
					<p class="text-16px text-#000 mt-10px">夏天</p>
					<p class="text-16px text-#000 mt-10px">15236325203</p>
					<img src="/transaction/c2c/quick/code-2d.svg" alt="" class="w-20px h-20px mt-10px"
					@click="imgShow = true">
				</div>
				<p class="text-14px text-#86909C mt-10px">添加新账户</p>
				<div class="mt-10px rounded-10px border border-solid border-#E5E6EB p-10px flex items-center justify-between">
					<div class="flex items-center">
						<p class="bg-#1187EE w-4px h-14px"></p>
						<p class="text-16px text-#000 ml-10px">支付宝</p>
					</div>
					<img src="/transaction/c2c/quick/add-pay.svg" alt="">
				</div>
			</div>
		</template>
	</el-dialog>
	<el-dialog v-model="imgShow" width="300px" close-icon="CloseBold">
		<template #default>
			<div class="flex flex-col items-center">
				<!-- 图片 -->
				<img src="/transaction/c2c/quick/zfb-fkm.svg" alt=""
				class="mt-20px">
				<!-- 保存按钮 -->
				<div class="flex items-center justify-center mt-20px">
					<img src="/transaction/c2c/quick/pay-load.svg" alt="">
					<p class="text-#114CEE cursor-pointer"
					@click="downloadImage(imgUrl)">保存</p>
				</div>
			</div>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import {downloadImage} from "@/utils/common";
interface IProps {
	visible: boolean
}

const imgUrl = ref<string>('http://localhost:3000/transaction/c2c/quick/zfb-fkm.svg')
const props = defineProps<IProps>()
const emit = defineEmits(['close'])
// 1,银行卡，2，微信，3，支付宝
const paymentSelected = ref<1|2|3>(3)

// 控制二维码显示
const imgShow = ref(false)

// 关闭事件
const closeEvent = () => {
	// 关闭返回一个false
	emit('close', false)
}
</script>
<style lang="scss" scoped>
</style>
